<template>
  <el-tabs
    v-model="editableTabsValue"
    type="card"
    class="demo-tabs"
    closable
    @edit="handleTabsEdit"
    @tab-click="toLinks"
    @tab-remove="removerTable"
  >
    <el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      :label="item.title"
      :name="item.name"
    >
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import emitter from "../plugins/evenHub";
export default defineComponent({
  name: "Table",
  setup() {
    let tabIndex = 1;
    const editableTabsValue = ref("1");
    const router = useRouter();

    const editableTabs = ref([
      {
        title: "首页",
        name: "1",
      },
    ]);

    const handleTabsEdit = (targetName: string, action: "remove" | "add") => {
      if (action === "add") {
        const newTabName = `${++tabIndex}`;
        editableTabs.value.push({
          title: "New Tab",
          name: newTabName,
        });
        editableTabsValue.value = newTabName;
      } else if (action === "remove") {
        const tabs = editableTabs.value;
        let activeName = editableTabsValue.value;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              const nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }

        editableTabsValue.value = activeName;
        editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
      }
    };

    const addtable = (info: any) => {
      if (JSON.stringify(editableTabs).indexOf(JSON.stringify(info)) === -1) {
        editableTabs.value.push(info);
        editableTabsValue.value = info.name;
      }
    };

    onMounted(() => {
      emitter.on("addTable", addtable);
    });

    const toLinks = (tab: any, event: any) => {
      const path = tab.props.name;
      switch (path) {
        case "1":
          emitter.emit("chengSelect", "0");
          router.push({ name: "main" });
          break;
        case "2":
          emitter.emit("chengSelect", "1-1");
          router.push({ name: "user" });
          break;
        case "3":
          emitter.emit("chengSelect", "1-2");
          router.push({ name: "role" });
          break;
        case "4":
          emitter.emit("chengSelect", "1-3");
          router.push({ name: "menu" });
          break;
        case "5":
          emitter.emit("chengSelect", "2-1");
          router.push({ name: "book" });
          break;
        case "6":
          router.push({ name: "userCenter" });
          break;
      }
    };

    const removerTable = (TabPanelName: any) => {
      switch (TabPanelName) {
        case "1":
          const data = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
          const index = data.length-1
          const path = data[index];
          const name = path.name;
          console.log(name);
          switch (name) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
        case "2":
          const data1 = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
          const index1 = data1.length-1
          const path1 = data1[index1];
          const name1 = path1.name;
          console.log(name1);
          switch (name1) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
        case "3":
          const data2 = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
          const index2 = data2.length-1
          const path2 = data2[index2];
          const name2 = path2.name;
          console.log(name2);
          switch (name2) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
        case "4":
          const data3 = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
          const index3 = data3.length-1
          const path3 = data3[index3];
          const name3 = path3.name;
          console.log(name3);
          switch (name3) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
        case "5":
          const data4 = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
         const index4 = data4.length-1
          const path4 = data4[index4];
          const name4 = path4.name;
          console.log(name4);
          switch (name4) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
        case "6":
          const data5 = editableTabs.value.filter((item) => {
            return item.name != TabPanelName;
          });
          const index5 = data5.length-1
          const path5 = data5[index5];
          const name5 = path5.name;
          console.log(name5);
          switch (name5) {
            case "1":
              router.push({ name: "main" });
              break;
            case "2":
              router.push({ name: "user" });
              break;
            case "3":
              router.push({ name: "role" });
              break;
            case "4":
              router.push({ name: "menu" });
              break;
            case "5":
              router.push({ name: "book" });
              break;
            case "6":
              router.push({ name: "userCenter" });
              break;
          }
          break;
      }
    };

    return {
      editableTabsValue,
      handleTabsEdit,
      editableTabs,
      toLinks,
      removerTable,
    };
  },
});
</script>

<style scoped lang="less">
.el-main {
  line-height: 0px;
  padding: 0;
  border: 0px;
}
el-main {
  padding: 0 !important;
}
</style>